<template>
  <div class="device">
    <el-scrollbar>
      <div class="statistics">
        <div class="content-wrapper gold">
          <div class="border"></div>
          <div class="title">
            <span class="t1">{{$t('总计')}}</span>
          </div>
          <div class="content">{{deviceCount}}<span class="unit">{{$t('个')}}</span></div>
        </div>
        <div class="content-wrapper green">
          <div class="border"></div>
          <div class="title">
            <span class="t1">{{$t('在线')}}</span>
            <div class="t2"></div>
          </div>
          <div class="content">{{onlineCount}}<span class="unit">{{$t('个')}}</span></div>
        </div>
        <div class="content-wrapper gray">
          <div class="border"></div>
          <div class="title">
            <span class="t1">{{$t('离线')}}</span>
            <div class="t2"></div>
          </div>
          <div class="content">{{offlineCount}}<span class="unit">{{$t('个')}}</span></div>
        </div>
      </div>
      <div class="tab-wrapper">
        <Tab :list="tabList" v-model:value="tab" size="small"></Tab>
        <div class="info" @click="addDevice">
          <div class="icon-wrapper">
            <span class="iconfont icon-tianjia"></span>
            <span class="text">{{$t('添加设备')}}</span>
          </div>
        </div>
      </div>
      <div v-if="tab === 'camera'" class="camera-wrapper">
        <Camera></Camera>
      </div>
      <div v-if="tab === 'device'" class="camera-wrapper">
        <Device :count="count"></Device>
      </div>
      <AddDevice
              v-if="addDeviceDialog"
              @refresh="refresh"
              @closeDeviceDialog="closeDeviceDialog"
      ></AddDevice>
    </el-scrollbar>
  </div>
</template>

<script>
import { deviceStatusStatistics } from '@/api/index';
import AddDevice from './components/addDevice.vue';
import Camera from './components/camera.vue';
import Device from './components/device.vue';
import Tab from '@/components/tab';
export default {
  name: 'System',
  props: {},
  components: { AddDevice, Tab, Camera, Device },
  data() {
    return {
      tab: 'camera',
      tabList: [
        {
          title: this.$t('摄像头位置设置'),
          value: 'camera',
        },
        {
          title: this.$t('设备列表'),
          value: 'device',
        },
      ],
      deviceCount: 0,
      offlineCount: 0,
      onlineCount: 0,
      addDeviceDialog: false,
      count: 0,
    };
  },
  mounted() {
    this.getStatistics();
  },
  methods: {
    async getStatistics() {
      const { data } = await deviceStatusStatistics();
      if (data.code === 0) {
        this.deviceCount = data.data.deviceCount;
        this.offlineCount = data.data.offlineCount;
        this.onlineCount = data.data.onlineCount;
      }
    },
    addDevice() {
      this.addDeviceDialog = true;
    },
    refresh(){
      this.count++;
    },
    closeDeviceDialog() {
      this.addDeviceDialog = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.device {
  width: 100%;
  height: calc(100% - 60px);
  background: #181818;
  box-shadow: 12px 12px 30px 0px rgba(40, 58, 44, 0.08);
  border-radius: 32px 32px 32px 32px;
  overflow: hidden;

  .statistics {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
  }

  .content-wrapper {
    padding: 0 40px;
    box-shadow: 20px 20px 30px 0px rgba(0, 0, 0, 0.65);
    width: calc(90% / 3);
    height: 232px;
    position: relative;
    border-radius: 32px;
    margin-right: 5%;
    @include clear;

    &:last-of-type {
      margin-right: 0;
    }

    .border {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      border: 1px solid transparent;
      border-radius: 32px;
      box-sizing: border-box;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      pointer-events: none;
      transition: 0.6s ease;
      background-size: 100% 100%;
    }

    .title {
      width: 100%;
      display: flex;
      align-items: center;
      position: relative;
      z-index: 5;
      box-sizing: border-box;
      margin-bottom: 16px;
      margin-top: 40px;

      .t1 {
        font-weight: 500;
        font-size: 22px;
        color: #ffffff;
      }

      .t2 {
        width: 12px;
        height: 12px;
        background-color: $color;
        border-radius: 50%;
        margin-top: -20px;
        margin-left: 5px;
      }
    }

    .content {
      font-weight: 500;
      font-size: 50px;
      color: #d8d8d8;
      line-height: 19px;
      position: relative;
      z-index: 5;
      box-sizing: border-box;
      margin-top: 50px;

      .unit {
        font-size: 22px;
      }
    }

    &:nth-of-type(2) {
      .content {
        color: $color;
      }
    }

    &:nth-of-type(3) {
      .t2 {
        background-color: #a3a3a3;
      }
    }

    &:hover {
      .border {
        background-size: 100% 300%;
      }
    }
  }

  .green {
    .border {
      background-image: linear-gradient(24deg, #000 55%, rgb(31, 52, 45)),
        linear-gradient(24deg, #000 55%, #1fd267);
    }
  }

  .gold {
    .border {
      background-image: linear-gradient(24deg, #000 55%, rgb(44, 42, 26)),
        linear-gradient(24deg, #000 55%, #fff133);
    }
  }

  .gray {
    .border {
      background-image: linear-gradient(24deg, #000 55%, rgb(35, 35, 35)),
        linear-gradient(24deg, #000 55%, rgb(136, 136, 136));
    }
  }

  .tab-wrapper {
    border-bottom: 1px solid #3b3b3b;
    display: flex;
    align-items: center;
    margin: 30px auto;
    padding: 0 0 15px;

    .list {
      width: calc(100% - 165px);
    }

    .info {
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      position: relative;
      width: 145px;
      margin-right: 20px;

      &:hover {
        .icon-wrapper {
          width: 100%;
          border-radius: 25px;

          .iconfont {
            left: 20px;
          }
        }
      }

      .icon-wrapper {
        width: 32px;
        height: 32px;
        background: $color;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        border-radius: 25px;
        transition: 0.3s ease;

        .iconfont {
          color: #ffffff;
          font-size: 16px;
          cursor: pointer;
          position: absolute;
          left: 8px;
          transition: 0.3s ease;
        }

        .text {
          font-size: 16px;
          color: #ffffff;
          margin-right: 23px;
          font-weight: 500;
          position: absolute;
          left: 45px;
        }
      }
    }
  }

  .camera-wrapper {
    padding: 0 30px;
  }
}
</style>
